feat(chip): add outlined version by adrianptrv · Pull Request #2307 · IgniteUI/igniteui-webcomponents

adrianptrv · 2026-08-04T11:15:11Z

Description

Adding a new outlined version of the Chip. All the new styles from the handoff have been applied.

Needs to be tested together with this theming PR: #592

Type of Change

Breaking change (fix or feature that causes existing functionality to change)

Related Issues

Closes IgniteUI/igniteui-theming#591

Testing

All the new changes can be tested and compared to the handoff through the Chip stories.

Checklist

My code follows the project's coding standards
I have tested my changes locally

Copilot

Pull request overview

This PR introduces an outlined visual style for igc-chip, wiring it through the component API, Storybook, tests, and theme styles so consumers can opt into an outlined appearance via a new outlined boolean attribute/property.

Changes:

Added a new reflected boolean outlined property to IgcChipComponent, plus Storybook controls and examples.
Extended shared + theme-specific SCSS to style outlined chips across light/dark and theme variants (material/bootstrap/fluent/indigo).
Added a unit test for toggling the new outlined property.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
stories/chip.stories.ts	Adds `outlined` control/args and showcases outlined variants/states in stories.
src/components/chip/chip.ts	Introduces the new reflected `outlined` boolean property on the component.
src/components/chip/chip.spec.ts	Adds a unit test for toggling `outlined` (but still missing required a11y audit coverage).
src/components/chip/themes/chip.base.scss	Adjusts base chip styling and adds outlined variant behavior in base styles.
src/components/chip/themes/shared/chip.common.scss	Adds core outlined state styling (background/text/border + hover/focus/disabled) via theme tokens.
src/components/chip/themes/shared/chip.indigo.scss	Updates indigo shared behaviors (focus shadow tokens, disabled/selected adjustments).
src/components/chip/themes/shared/chip.fluent.scss	Adds fluent shared overrides for outlined variant backgrounds.
src/components/chip/themes/shared/chip.bootstrap.scss	Adds bootstrap shared overrides for outlined variants (hover/focus behavior).
src/components/chip/themes/light/chip.material.scss	Adds light material outlined-variant border/text overrides.
src/components/chip/themes/light/chip.indigo.scss	Adds light indigo outlined-variant behaviors + warning disabled color adjustment.
src/components/chip/themes/light/chip.fluent.scss	Adds light fluent outlined-variant border/text + hover/focus backgrounds.
src/components/chip/themes/light/chip.bootstrap.scss	Adds light bootstrap outlined-variant border/text overrides.
src/components/chip/themes/dark/chip.material.scss	Adds dark material outlined-variant border/text overrides.
src/components/chip/themes/dark/chip.indigo.scss	Adds dark indigo outlined-variant behaviors + warning disabled color adjustment.
src/components/chip/themes/dark/chip.fluent.scss	Adds dark fluent outlined-variant border/text + hover/focus backgrounds.
src/components/chip/themes/dark/chip.bootstrap.scss	Adds dark bootstrap outlined-variant border/text overrides.

rkaraivanov · 2026-08-04T11:24:01Z

@adrianptrv
Is this really a breaking change? It seems like a new feature, unless there is something I'm not seeing. Also, add a changelog entry describing the new feature.

simeonoff · 2026-08-04T12:51:59Z

@adrianptrv Is this really a breaking change? It seems like a new feature, unless there is something I'm not seeing. Also, add a changelog entry describing the new feature.

He's essentially changing some of the theme CSS variables.

Copilot

Pull request overview

Copilot reviewed 17 out of 17 changed files in this pull request and generated no new comments.

Suppressed comments (3)

stories/chip.stories.ts:85

The args interface doc for outlined should follow the same “Whether …” phrasing used across the codebase for boolean properties.

  /** Defines if the chip is outlined or not. */
  outlined: boolean;

src/components/chip/chip.ts:81

The new outlined property JSDoc uses the older “Defines if …” phrasing and omits @default. Most components document booleans as “Whether …” and include an explicit default (e.g. src/components/icon/icon.ts:109-114). Aligning this keeps generated docs and Storybook descriptions consistent.

  /**
   * Defines if the chip is outlined or not.
   *
   * @attr
   */

stories/chip.stories.ts:41

Storybook argTypes description for outlined should match the component’s boolean-doc convention (“Whether …”), otherwise the generated docs read awkwardly/inconsistently.

This issue also appears on line 84 of the same file.

    outlined: {
      type: 'boolean',
      description: 'Defines if the chip is outlined or not.',
      control: 'boolean',
      table: { defaultValue: { summary: 'false' } },
    },

Copilot

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.

Copilot

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated no new comments.

Suppressed comments (1)

src/components/chip/themes/shared/chip.indigo.scss:34

The :host([selected]) button[disabled] { opacity: .4; } rule applies to all selected+disabled chips, including variant='primary'. This conflicts with the later rules that intentionally avoid adding opacity for the primary filled variant (see the @if $variant != 'primary' { opacity: .4; } branch in the disabled variant mixin), and will make selected + variant='primary' + disabled unexpectedly semi-transparent.

:host([selected]) button[disabled] {
    opacity: .4;
}

simeonoff

The biggest concern I have with this PR is that colors for various states are hardcoded in the implementation of the component theme and not consumed from the component schema. For instance, some of the colors for the focus/hover states for background are hard-coded here. What is the reason for that?

simeonoff · 2026-08-06T06:51:11Z

+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);


Interesting approach, I've thought those colors should be derived from the component schema, not hand written here.

simeonoff · 2026-08-06T06:51:24Z

+
+        &:focus {
+            background: color($variant-color, 800, .50);
+        }
+
+        &:hover {
+            background: color($variant-color, 600, .20);
+        }


Same comment as the one above.

simeonoff · 2026-08-06T06:51:31Z

+                background: color($variant-color, 500, .30);
+            } @else {
+                background: color($variant-color, 400, .30);
+            }


Same comment as the one above.

feat(chip): add outlined attr and styles

dd73c80

adrianptrv requested a review from simeonoff August 4, 2026 11:15

adrianptrv assigned desig9stein and sbayreva Aug 4, 2026

Copilot AI review requested due to automatic review settings August 4, 2026 11:15

adrianptrv added ❌ status: awaiting-test chip design: awaiting-validation styling labels Aug 4, 2026

Merge branch 'master' into apetrov/chip-outlined

05da111

Copilot started reviewing on behalf of adrianptrv August 4, 2026 11:15 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

Comment thread src/components/chip/chip.spec.ts

Comment thread src/components/chip/themes/shared/chip.indigo.scss Outdated

chore(chip): address comments

302d081

Copilot AI review requested due to automatic review settings August 4, 2026 13:41

Copilot started reviewing on behalf of adrianptrv August 4, 2026 13:42 View session

Copilot AI reviewed Aug 4, 2026

View reviewed changes

sbayreva added design: in-validation and removed design: awaiting-validation labels Aug 5, 2026

adrianptrv mentioned this pull request Aug 5, 2026

feat(chip): add outlined version IgniteUI/igniteui-angular#17485

Open

8 tasks

deps(theming): bump to latest compatible version

ec10660

Copilot AI review requested due to automatic review settings August 6, 2026 06:45

Copilot started reviewing on behalf of simeonoff August 6, 2026 06:46 View session

Merge branch 'master' into apetrov/chip-outlined

177bac9

Copilot AI reviewed Aug 6, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings August 6, 2026 06:49

Copilot started reviewing on behalf of adrianptrv August 6, 2026 06:50 View session

Copilot AI reviewed Aug 6, 2026

View reviewed changes

simeonoff reviewed Aug 6, 2026

View reviewed changes

Navigation Menu

Uh oh!

feat(chip): add outlined version - #2307

feat(chip): add outlined version#2307
adrianptrv wants to merge 5 commits into
masterfrom
apetrov/chip-outlined

adrianptrv commented Aug 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

rkaraivanov commented Aug 4, 2026

Uh oh!

simeonoff commented Aug 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

simeonoff left a comment

Uh oh!

simeonoff Aug 6, 2026

Uh oh!

simeonoff Aug 6, 2026

Uh oh!

simeonoff Aug 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

		border-color: color($variant-color, $border-shade);
		color: contrast-color(gray, 100);

Uh oh!

Conversation

adrianptrv commented Aug 4, 2026

Description

Type of Change

Related Issues

Testing

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

rkaraivanov commented Aug 4, 2026

Uh oh!

simeonoff commented Aug 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

simeonoff left a comment

Choose a reason for hiding this comment

Uh oh!

simeonoff Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

simeonoff Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

simeonoff Aug 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants